import Link from 'next/link';

export default async function NewsArticle({
    params,
    searchParams
}: {
    params: Promise<{ articleId: string }>,
    searchParams: Promise<{ lang?: "en" | "es" | "fr" }>
}) {
    const { articleId } = await params;
    const { lang = "en" } = await searchParams;
    return (
        <div>
            <h3>News article { articleId }</h3>
            <p>Reading in {lang}</p>
            <div>
                <Link href={`/articles/${articleId}?lang=en`}>English</Link>
                <Link href={`/articles/${articleId}?lang=es`}>Spanish</Link>
                <Link href={`/articles/${articleId}?lang=fr`}>French</Link>
            </div>
        </div>
    )
}

// "use client"
// import { use } from "react"
// import Link from 'next/link';

// export default function NewsArticle({
//     params,
//     searchParams
// }: {
//     params: Promise<{ articleId: string }>,
//     searchParams: Promise<{ lang?: "en" | "es" | "fr" }>
// }) {
//     const { articleId } = use(params);
//     const { lang = "en" } = use(searchParams);
//     return (
//         <div>
//             <h3>News article {articleId}</h3>
//             <p>Reading in {lang}</p>
//             <div>
//                 <Link href={`/articles/${articleId}?lang=en`}>English</Link>
//                 <Link href={`/articles/${articleId}?lang=es`}>Spanish</Link>
//                 <Link href={`/articles/${articleId}?lang=fr`}>French</Link>
//             </div>
//         </div>
//     )
// }
